<template>
    <div class="commp-table-total-box" :style="{width:typeof tableWidth == 'number'?tableWidth+'px':tableWidth}">
        <div v-if="!isCanWrap">
            <div class="commp-vxe-table-box overflowHidden-table-box" v-if="!adaptiveHeight" :style="{padding:tablePadding?tablePadding:'5px 15px'}">
                <vxe-grid
                ref="xGrid" 
                v-bind="gridOptions"
                @checkbox-change="checkboxChange"
                @checkbox-all="checkboxChange"
                @radio-change="radioChange"
                @page-change="pageChange"
                :row-checked="row => row.checked"
                @sort-change="sortChangeEvent"
                @toggle-tree-expand="toggleExpandChangeEvent"
                >
                    <template v-for="(item,index) in scopedSlots" #[item.header]="{row}">
                        <span v-if="item.data.titleInterval">
                            <span v-for="(trem,tI) in item.data.title.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== item.data.title.split('').length">&nbsp;&nbsp;</span></span>
                        </span>
                        <slot :name="item.default" :row="row" v-else></slot>
                    </template>
                    <!--将表单放在工具栏中-->
                    <template #toolbar_buttons >
                        <div :id="randomFormDataId" class="condition-vxe-box" :class="[conditionBtnRow?'condition-btn-row':'',!formItem.length?'form-item-emty-box':'']" v-if="!topSearchAndBtnHeight || topSearchAndBtnHeight>20">
                            
                            <!-- {{ formItem }} -->
                            <vxe-form :data="formData" @submit="searchEvent('oneself')" @reset="resetEvent" v-if="formItem.length" :key="formDataKey">
                                <vxe-form-item
                                v-for="(item,index) in formItem"
                                 field="name" :title="item.label+':'" 
                                 :key="index"
                                 v-if="searchTypeContent == item.searchType || !item.searchType"
                                 >
                                    <template #title>
                                        <div style="display: flex;" :id="'labelVxeTitleSize'+formItemLabelIndex+''+index" :style="{width:formItemLabelArr.length?formItemLabelArr.reduce((a,b)=>Math.max(a,b),Number.MIN_SAFE_INTEGER)+1+'px':'auto',textAlign:'right'}">
                                            <span style="flex: 1;display: flex;justify-content: space-between;" v-if="item.interval">
                                                <span v-for="(trem,tI) in item.label.split('')" :key="tI" >{{trem}} </span>
                                            </span>
                                            <span style="flex: 1;display: flex;justify-content: flex-end;" v-else>{{ item.label}}</span>
                                            <span>:</span>
                                        </div>
                                    </template>
                                    <template #default="{ data }" v-if="!item.type">
                                        <vxe-input
                                         :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}" 
                                         v-if="!item.slotName" 
                                         v-model="data[item.model]" type="text" :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"
                                         ></vxe-input>
                                        <slot v-else :name="item.slotName" :data="{...data,widthString:(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'),widthStringT:(Math.ceil((windowInnerWidth / arrangeSearchNum)*2+formItemLabelMaxSize+10) + 'px')}" ></slot>
                                    </template>
                                    <template #default="{ data }" v-else>
                                        <!-- {{ '88='+item.offsetWidth }}
                                        {{ Math.ceil(windowInnerWidth / arrangeSearchNum) }}
                                        {{ Math.ceil(windowInnerWidth / arrangeSearchNum)>=item.offsetWidth }}
                                        {{ Math.ceil((windowInnerWidth / arrangeSearchNum)*2+90)>=item.offsetWidth }}
                                        {{ item.width?item.width:
                                            (item.offsetWidth?
                                            (Math.ceil(windowInnerWidth / arrangeSearchNum)>=item.offsetWidth ?Math.ceil(windowInnerWidth / arrangeSearchNum):
                                            (Math.ceil((windowInnerWidth / arrangeSearchNum)*2+90)>=item.offsetWidth)?Math.ceil((windowInnerWidth / arrangeSearchNum)*2+90):
                                            Math.ceil((windowInnerWidth / arrangeSearchNum)*3+185)):(windowInnerWidth?windowInnerWidth / arrangeSearchNum :180)) }} -->
                                        <!-- <vxe-select v-model="data[item.model]" :placeholder="item.placeholder?item.placeholder:'请选择'+item.label">
                                            <vxe-option v-for="(nope,nIndex) in item.selectArr" :key="nIndex" :value="nope.itemValue" :label="nope.itemText"></vxe-option>
                                        </vxe-select> -->
                                        <a-date-picker
                                            v-if="item.type == 'datePicker' && item.format=='YYYY'"
                                            :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}"
                                            @panelChange="($event)=>{panelChangeDatePicker($event,item.format,item.model)}" 
                                            :format="item.format"
                                            :mode="item.format=='YYYY'?'year':'date'"
                                            :type="item.format=='YYYY'?'year':''"
                                            v-model:value="data[item.model]"
                                            :key="yearPickerKey"
                                        />
                                        <a-date-picker
                                            v-else-if="item.type == 'datePicker' && item.format !=='YYYY'"
                                            :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}"
                                            @change="($event)=>{onChangeDatePicker($event,item.format,item.model)}" 
                                            :format="item.format"
                                            :type="item.format=='YYYY'?'year':''"
                                            v-model:value="data[item.model]"
                                        />
                                        <a-range-picker 
                                            :key="rangePickerKey"
                                            :style="{width:windowInnerWidth?(Math.ceil((windowInnerWidth / arrangeSearchNum)*2+formItemLabelMaxSize+10) + 'px'):'180px'}"
                                            :allowClear="item.allowClear?item.allowClear:false"
                                            :defaultValue="[data[item.model[0]],data[item.model[1]]]"
                                            @change="($event)=>{onChangeRangePicker($event,item.format,item.model)}" 
                                            v-else-if="item.type == 'rangePicker'" 
                                            :format="item.format"
                                        />
                                        
                                        <compSelector
                                            v-else
                                            :ref="'compSelectorRef'+index+item.type"
                                            :id="'compSelectorClass'+index+item.type"
                                            :key="compSelectorKey"
                                            v-model="data[item.model]"
                                            :compType="item.type"
                                            :defaultValue="data[item.model]?data[item.model]:item.defaultValue"
                                            :placeholder="item.label"
                                            :options="item.options?item.options:''"
                                            :dictionaryType="item.dictionaryType?item.dictionaryType:''"
                                            :separateAreas="item.separateAreas?item.separateAreas:''"
                                            @selectHandleChange="selectHandleChange($event,item.model,item.convert)"
                                            @nextTickYeas="handleResize"
                                            :refSubelement="item.type?item.type+index:'Select'+index"
                                            :index="index"
                                            :dataItem="{...item,windowInnerWidth:Math.ceil(windowInnerWidth / arrangeSearchNum),formItemLabelMaxSize:formItemLabelMaxSize+10}"
                                            :height="30"
                                            :width="item.width?item.width:(windowInnerWidth?Math.ceil(windowInnerWidth / arrangeSearchNum):180)"
                                            :isDisable="item.isDisable?true:false"
                                        />
                                        <!-- :width="item.width?item.width:(windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum)):180)" -->
                                    </template>
                                </vxe-form-item>
                                <vxe-form-item>
                                    <template #default="{ data }">
                                        <div
                                         :style="{width:innerWidth?(Math.ceil((innerWidth / arrangeSearchNum)+formItemLabelMaxSize) + 'px'):'220px',height:34+'px'}"
                                         style="display: flex;align-items: center;"
                                        >
                                            <vxe-button type="submit" status="primary" content="查询" icon="vxe-icon-search"></vxe-button>
                                            <vxe-button type="reset" content="重置" icon="vxe-icon-repeat"></vxe-button>
                                            <vxe-button style="color: #5ca3e5;" size="small" @click="searchTypeClick" v-if="searchType">
                                                <span style="display: flex;align-items: center;">
                                                    <span>{{searchTypeContent}}</span>
                                                    <span style="height: 20px;line-height: 20px;">
                                                        <a-icon v-if="searchTypeContent == '展开'" type="down" />
                                                        <a-icon v-if="searchTypeContent == '收起'" type="up" />
                                                    </span>
                                                </span>
                                            </vxe-button>
                                            <slot name="querButton" :data="data" ></slot>
                                        </div>
                                        
                                    </template>
                                </vxe-form-item>
                            </vxe-form>
                            <div class="push-button-vxe">
                                <vxe-form>
                                    <template #default="{ data }">
                                        <slot name="externalOperations" :data="data" ></slot>
                                    </template>
                                </vxe-form>
                            </div>
                            
                        </div>
                    </template>
                    <template v-for="(item,index) in scopedSlots" #[item.default]="{row,rowIndex}" v-if="renderingCompleted">
                        <div
                         :style="{textAlign:item.default == 'operation_btn'?'left':item.align,}" 
                         style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                        >
                            <slot :name="item.default" :row="row"></slot>
                        </div>
                    </template>
                    <template #img1_default="{ row }">
                        <img v-if="row.img1" :src="row.img1" style="width: 100px;"/>
                        <span v-else>无</span>
                    </template>

                    <!--自定义空数据模板-->
                    <template #empty>
                        <span style="color: #666;">
                            <p>没有更多数据了！</p>
                        </span>
                    </template>
                </vxe-grid>
            </div>
            <div v-else class="adaptive-height-box" :style="{padding:tablePadding?tablePadding:'5px 15px'}">
                <vxe-grid
                ref="xGrid" 
                v-bind="gridOptions"
                @checkbox-change="checkboxChange"
                @checkbox-all="checkboxChange"
                @radio-change="radioChange"
                @page-change="pageChange"
                :row-checked="row => row.checked"
                @sort-change="sortChangeEvent"
                >
                    <template v-for="(item,index) in scopedSlots" #[item.header]="{row}">
                        <span v-if="item.data.titleInterval">
                            <span v-for="(trem,tI) in item.data.title.split('')" :key="tI" >{{trem}} 
                                <span v-if="tI+1 !== item.data.title.split('').length">&nbsp;&nbsp;</span>
                            </span>
                        </span>
                        <slot :name="item.default" :row="row" v-else></slot>
                    </template>
                    <!--将表单放在工具栏中-->
                    <template #toolbar_buttons >
                        <div :id="randomFormDataId" class="condition-vxe-box" :class="[conditionBtnRow?'condition-btn-row':'',!formItem.length?'form-item-emty-box':'']" v-if="!topSearchAndBtnHeight || topSearchAndBtnHeight>20">
                            <vxe-form :data="formData" @submit="searchEvent('oneself')" @reset="resetEvent" v-if="formItem.length" :key="formDataKey">
                                <vxe-form-item v-for="(item,index) in formItem" field="name" :title="item.label+':'" :key="index" v-if="searchTypeContent == item.searchType || !item.searchType">
                                    <template #title>
                                        <div style="display: flex;" :id="'labelVxeTitleSize'+formItemLabelIndex+''+index" :style="{width:formItemLabelArr.length?formItemLabelArr.reduce((a,b)=>Math.max(a,b),Number.MIN_SAFE_INTEGER)+1+'px':'auto',textAlign:'right'}">
                                            <span style="flex: 1;display: flex;justify-content: space-between;" v-if="item.interval">
                                                <span v-for="(trem,tI) in item.label.split('')" :key="tI" >{{trem}} </span>
                                            </span>
                                            <span style="flex: 1;display: flex;justify-content: flex-end;" v-else>{{ item.label}}</span>
                                            <span>:</span>
                                        </div>
                                    </template>
                                    <template #default="{ data }" v-if="!item.type">
                                        <vxe-input :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}" v-if="!item.slotName" v-model="data[item.model]" type="text" :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"></vxe-input>
                                        <slot v-else :name="item.slotName" :data="{...data,widthString:(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'),widthStringT:(Math.ceil((windowInnerWidth / arrangeSearchNum)*2+formItemLabelMaxSize+10) + 'px')}" ></slot>
                                    </template>
                                    <template #default="{ data }" v-else>
                                        <!-- <vxe-select v-model="data[item.model]" :placeholder="item.placeholder?item.placeholder:'请选择'+item.label">
                                            <vxe-option v-for="(nope,nIndex) in item.selectArr" :key="nIndex" :value="nope.itemValue" :label="nope.itemText"></vxe-option>
                                        </vxe-select> -->
                                        <a-date-picker
                                            v-if="item.type == 'datePicker' && item.format=='YYYY'"
                                            :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}"
                                            @panelChange="($event)=>{panelChangeDatePicker($event,item.format,item.model)}" 
                                            :format="item.format"
                                            :mode="item.format=='YYYY'?'year':'date'"
                                            :type="item.format=='YYYY'?'year':''"
                                            v-model:value="data[item.model]"
                                            :key="yearPickerKey"
                                        />
                                        <a-date-picker
                                            v-else-if="item.type == 'datePicker' && item.format !=='YYYY'"
                                            :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}"
                                            @change="($event)=>{onChangeDatePicker($event,item.format,item.model)}" 
                                            :format="item.format"
                                            :type="item.format=='YYYY'?'year':''"
                                            v-model:value="data[item.model]"
                                        />
                                        <a-range-picker 
                                            :key="rangePickerKey"
                                            :style="{width:windowInnerWidth?(Math.ceil((windowInnerWidth / arrangeSearchNum)*2+formItemLabelMaxSize+10) + 'px'):'180px'}"
                                            :allowClear="item.allowClear?item.allowClear:false"
                                            :defaultValue="[data[item.model[0]],data[item.model[1]]]"
                                            @change="($event)=>{onChangeRangePicker($event,item.format,item.model)}" 
                                            v-else-if="item.type == 'rangePicker'" 
                                            :format="item.format"
                                        />
                                        <compSelector
                                            v-else
                                            :ref="'compSelectorRef'+index+item.type"
                                            :id="'compSelectorClass'+index+item.type"
                                            :key="compSelectorKey"
                                            v-model="data[item.model]"
                                            :compType="item.type"
                                            :defaultValue="data[item.model]?data[item.model]:item.defaultValue"
                                            :placeholder="item.label"
                                            :options="item.options?item.options:''"
                                            :dictionaryType="item.dictionaryType?item.dictionaryType:''"
                                            :separateAreas="item.separateAreas?item.separateAreas:''"
                                            @selectHandleChange="selectHandleChange($event,item.model,item.convert)"
                                            @nextTickYeas="handleResize"
                                            :refSubelement="item.type?item.type+index:'Select'+index"
                                            :index="index"
                                            :dataItem="{...item,windowInnerWidth:Math.ceil(windowInnerWidth / arrangeSearchNum),formItemLabelMaxSize:formItemLabelMaxSize+10}"
                                            :height="30"
                                            :width="item.width?item.width:(windowInnerWidth?Math.ceil(windowInnerWidth / arrangeSearchNum):180)"
                                            :isDisable="item.isDisable?true:false"
                                        />
                                    </template>
                                </vxe-form-item>
                                <vxe-form-item>
                                    <!--  -->
                                        <template #default="{ data }">
                                            <div
                                             :style="{width:innerWidth?(Math.ceil((innerWidth / arrangeSearchNum)+formItemLabelMaxSize) + 'px'):'220px',height:34+'px'}"
                                             style="display: flex;align-items: center;"
                                            >
                                                <vxe-button style="margin-left: 2px;" type="submit" status="primary" content="查询" icon="vxe-icon-search"></vxe-button>
                                                <vxe-button type="reset" content="重置" icon="vxe-icon-repeat"></vxe-button>
                                                <vxe-button style="color: #5ca3e5;" size="small" @click="searchTypeClick" v-if="searchType">
                                                    <span style="display: flex;align-items: center;">
                                                        <span>{{searchTypeContent}}</span>
                                                        <span style="height: 20px;line-height: 20px;">
                                                            <a-icon v-if="searchTypeContent == '展开'" type="down" />
                                                            <a-icon v-if="searchTypeContent == '收起'" type="up" />
                                                        </span>
                                                    </span>
                                                </vxe-button>
                                                <slot name="querButton" :data="data" ></slot>
                                            </div>
                                        </template>
                                </vxe-form-item>
                            </vxe-form>
                            <div class="push-button-vxe">
                                <vxe-form>
                                    <template #default="{ data }">
                                        <slot name="externalOperations" :data="data" ></slot>
                                    </template>
                                </vxe-form>
                            </div>
                            
                        </div>
                    </template>
                    <template v-for="(item,index) in scopedSlots" #[item.default]="{row,rowIndex}" v-if="renderingCompleted">
                        <div
                         :style="{textAlign:item.default == 'operation_btn'?'left':item.align,}" 
                         style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                        >
                            <slot :name="item.default" :row="row"></slot>
                        </div>
                    </template>
                    <template #img1_default="{ row }">
                        <img v-if="row.img1" :src="row.img1" style="width: 100px;"/>
                        <span v-else>无</span>
                    </template>

                    <!--自定义空数据模板-->
                    <template #empty>
                        <span style="color: #666;">
                            <p>没有更多数据了！</p>
                        </span>
                    </template>
                </vxe-grid>
            </div>
        </div>
        <div v-if="isCanWrap" class="commp-vxe-table-box isCanWrap-box" :style="{padding:tablePadding?tablePadding:'5px 15px'}">
            <div :id="randomFormDataId" class="condition-vxe-box overflowHidden-table-box" :class="[conditionBtnRow?'condition-btn-row':'',!formItem.length?'form-item-emty-box':'']" v-if="!topSearchAndBtnHeight || topSearchAndBtnHeight>20">
                <!-- <div style="background: #fff;width: 100%;"> -->
                    <vxe-form :data="formData" @submit="searchEvent('oneself')" @reset="resetEvent" v-if="formItem.length" :key="formDataKey">
                        <vxe-form-item v-for="(item,index) in formItem" field="name" :title="item.label+':'" :key="index" v-if="searchTypeContent == item.searchType || !item.searchType">
                            <template #title>
                                <div style="display: flex;" :id="'labelVxeTitleSize'+formItemLabelIndex+''+index" :style="{width:formItemLabelArr.length?formItemLabelArr.reduce((a,b)=>Math.max(a,b),Number.MIN_SAFE_INTEGER)+1+'px':'auto',textAlign:'right'}">
                                    <span style="flex: 1;display: flex;justify-content: space-between;" v-if="item.interval">
                                        <span v-for="(trem,tI) in item.label.split('')" :key="tI" >{{trem}} </span>
                                    </span>
                                    <span style="flex: 1;display: flex;justify-content: flex-end;" v-else>{{ item.label}}</span>
                                    <span>:</span>
                                </div>
                            </template>
                            <template #default="{ data }" v-if="!item.type">
                                <vxe-input :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}" v-if="!item.slotName" v-model="data[item.model]" type="text" :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"></vxe-input>
                                <slot v-else :name="item.slotName" :data="{...data,widthString:(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'),widthStringT:(Math.ceil((windowInnerWidth / arrangeSearchNum)*2+formItemLabelMaxSize+10) + 'px')}" ></slot>
                            </template>
                            <template #default="{ data }" v-else>
                                <!-- <vxe-select v-model="data[item.model]" :placeholder="item.placeholder?item.placeholder:'请选择'+item.label">
                                    <vxe-option v-for="(nope,nIndex) in item.selectArr" :key="nIndex" :value="nope.itemValue" :label="nope.itemText"></vxe-option>
                                </vxe-select> -->
                                <a-date-picker
                                    v-if="item.type == 'datePicker' && item.format=='YYYY'"
                                    :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}"
                                    @panelChange="($event)=>{panelChangeDatePicker($event,item.format,item.model)}" 
                                    :format="item.format"
                                    :mode="item.format=='YYYY'?'year':'date'"
                                    :type="item.format=='YYYY'?'year':''"
                                    v-model:value="data[item.model]"
                                    :key="yearPickerKey"
                                />
                                <a-date-picker
                                    v-else-if="item.type == 'datePicker' && item.format !=='YYYY'"
                                    :style="{width:windowInnerWidth?(Math.ceil(windowInnerWidth / arrangeSearchNum) + 'px'):'180px'}"
                                    @change="($event)=>{onChangeDatePicker($event,item.format,item.model)}" 
                                    :format="item.format"
                                    :type="item.format=='YYYY'?'year':''"
                                    v-model:value="data[item.model]"
                                />
                                <a-range-picker 
                                    :key="rangePickerKey"
                                    :style="{width:windowInnerWidth?(Math.ceil((windowInnerWidth / arrangeSearchNum)*2+formItemLabelMaxSize+10) + 'px'):'180px'}"
                                    :allowClear="item.allowClear?item.allowClear:false"
                                    :defaultValue="[data[item.model[0]],data[item.model[1]]]"
                                    @change="($event)=>{onChangeRangePicker($event,item.format,item.model)}" 
                                    v-else-if="item.type == 'rangePicker'" 
                                    :format="item.format"
                                />
                                <compSelector
                                    v-else
                                    :ref="'compSelectorRef'+index+item.type"
                                    :id="'compSelectorClass'+index+item.type"
                                    :key="compSelectorKey"
                                    v-model="data[item.model]"
                                    :compType="item.type"
                                    :defaultValue="data[item.model]?data[item.model]:item.defaultValue"
                                    :placeholder="item.label"
                                    :options="item.options?item.options:''"
                                    :dictionaryType="item.dictionaryType?item.dictionaryType:''"
                                    :separateAreas="item.separateAreas?item.separateAreas:''"
                                    @selectHandleChange="selectHandleChange($event,item.model,item.convert)"
                                    @nextTickYeas="handleResize"
                                    :refSubelement="item.type?item.type+index:'Select'+index"
                                    :index="index"
                                    :dataItem="{...item,windowInnerWidth:Math.ceil(windowInnerWidth / arrangeSearchNum),formItemLabelMaxSize:formItemLabelMaxSize+10}"
                                    :height="30"
                                    :width="
                                    item.width?item.width:(windowInnerWidth?Math.ceil(windowInnerWidth / arrangeSearchNum):180)"
                                    :isDisable="item.isDisable?true:false"
                                />
                            </template>
                        </vxe-form-item>
                        <vxe-form-item>
                            <!--  -->
                                <template #default="{ data }">
                                    <div
                                     :style="{width:innerWidth?(Math.ceil((innerWidth / arrangeSearchNum)+formItemLabelMaxSize) + 'px'):'220px',height:34+'px'}"
                                     style="display: flex;align-items: center;"
                                     >
                                        <vxe-button style="margin-left: 2px;" type="submit" status="primary" content="查询" icon="vxe-icon-search"></vxe-button>
                                        <vxe-button type="reset" content="重置" icon="vxe-icon-repeat"></vxe-button>
                                        <vxe-button style="color: #5ca3e5;" size="small" @click="searchTypeClick" v-if="searchType">
                                            <span style="display: flex;align-items: center;">
                                                <span>{{searchTypeContent}}</span>
                                                <span style="height: 20px;line-height: 20px;">
                                                    <a-icon v-if="searchTypeContent == '展开'" type="down" />
                                                    <a-icon v-if="searchTypeContent == '收起'" type="up" />
                                                </span>
                                            </span>
                                            
                                        </vxe-button>
                                        <slot name="querButton" :data="data" ></slot>
                                    </div>
                                </template>
                        </vxe-form-item>
                    </vxe-form>
                <!-- </div> -->
                
                <div class="push-button-vxe">
                    <vxe-form>
                        <template #default="{ data }">
                            <slot name="externalOperations" :data="data" ></slot>
                        </template>
                    </vxe-form>
                </div>
                
            </div>
            <!-- gridOptions.height -->
            <vxe-table
            ref="xGrid"
            :scroll-x="{enabled:true}"
            border
            stripe
            align="center"
            header-align="center"
            :stripe="true"
            :height="adaptiveHeight?'':(config.height?config.height:(canWrapTableHeight?canWrapTableHeight:tableHeight))"
            :loading="gridOptions.loading"
            :column-config="{resizable: true}"
            :row-config="{isHover: true,isCurrent: true,}"
            :row-id="selectItem.key?selectItem.key:'id'"
            :checkbox-config="{labelField: '', highlight: true, range: true, checkMethod: checkRadioMethod,}"
            :radio-config="{labelField: '', highlight: true, range: true, checkMethod: checkRadioMethod,}"
            :data="gridOptions.data"
            @checkbox-change="checkboxChange"
            @checkbox-all="checkboxChange"
            @radio-change="radioChange"
            @sort-change="sortChangeEvent"
            >
                <vxe-column v-for="(item,index) in columns" v-if="item.type == 'checkbox' || item.type == 'radio'" :type="item.type" :width="item.width"></vxe-column>
                <!-- :fixed="item.fixed" -->
                <vxe-column v-for="(item,index) in columns" v-if="item.type !== 'checkbox' && item.type !== 'radio'" :title="item.title" :field="item.field" :width="item.width" :type="item.type"  :sortable="item.sortable">
                    <template #header="{row}" >
                        <span v-if="item.titleInterval || (item.slots && item.slots.header)" style="width: 100%;" :style="{textAlign:item.headerAlign?item.headerAlign:(item.align?item.align:'center')}">
                            <span v-for="(trem,tI) in item.title.split('')" :key="tI">
                                {{trem}} 
                                <span v-if="tI+1 !== item.title.split('').length">&nbsp;&nbsp;</span>
                            </span>
                        </span>
                        <span v-if="!item.titleInterval" style="width: 100%;" :style="{textAlign:item.headerAlign?item.headerAlign:(item.align?item.align:'center')}">
                            {{item.title}}
                        </span>
                        <div v-if="!item.titleInterval && (item.slots && item.slots.header)" style="width: 100%;" :style="{textAlign:item.headerAlign?item.headerAlign:(item.align?item.align:'center')}">
                            <slot :name="item.slots.header" :row="row"></slot>
                        </div>
                    </template>
                    <!-- <template #header="{row}" v-if="!item.titleInterval">
                        
                    </template> -->
                    <!-- <template #header="{row}" v-if="(item.slots && item.slots.header)">
                        <div style="width: 100%;" :style="{textAlign:item.headerAlign?item.headerAlign:(item.align?item.align:'center')}">
                            <slot :name="item.slots.header" :row="row"></slot>
                        </div>
                    </template> -->
                    <template #default="{ row }" v-if="(item.slots && item.slots.default)">
                        <div :style="{textAlign:item.slots.default == 'operation_btn'?'left':item.align}">
                            <slot :name="item.slots.default" :row="row"></slot>
                        </div>
                        
                    </template>
                    <template #default="{ row }" v-else>
                        <div :style="{textAlign:item.align}">
                            {{ row[item.field] }}
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
            <div style="width: 100%;display: flex;justify-content: flex-end;" v-if="!this.config.autoHidden">
                <vxe-pager @page-change="pageChange" :current-page.sync="gridOptions.pagerConfig.currentPage" :page-size.sync="gridOptions.pagerConfig.pageSize" :total="gridOptions.pagerConfig.total" />
            </div>
        </div>
    </div>
</template>
<script>
import { axios } from '@/utils/request'
import { mapState } from 'vuex'
import XEUtils, { isArray } from 'xe-utils'
import compSearchCriteria from '../compSearchCriteria/compSearchCriteria'
import compSelector from '../compSelector/compSelector.vue'
import YchConstant from '@/api/YchConstant'
import moment from 'moment'
import { Object } from 'core-js'
export default {
    components:{
        compSearchCriteria,
        compSelector
    },
    props:{
        /*
        autoHidden 是否显示分页-- 反向判断（false显示、true不显示）
        */
        config:{
            type:Object,
            default:()=>{
                return {}
            },
            required:false,
        },
        tablePadding:{
            type:String,
            default:()=>{
                return ''
            },
            required:false,
        },
        formData:{
            type:Object,
            default:()=>{
                return{}
            },
            required:false,
        },
        formItem:{
            type:Array,
            default:()=>{
                return []
            },
            required:false,
        },
        tableData:{
            type:Array,
            default:()=>{
                return []
            },
            required:false,
        },
        scopedSlots:{//插槽
            type:Array,
            default:()=>{
                return []
            },
            required:false,
        },
        columns:{
            type:Array,
            default:()=>{
                return []
            },
            required:false,
        },
        serverSorter:{
            type:Boolean,
            default:()=>{
                return true
            },
            required:false,
        },
        adaptiveHeight:{//自适应高度
            type:Boolean,
            default:()=>{
                return false
            },
            required:false,
        },
        toBoolean: {
            // 把配置的值 转为 boolean
            type: Object,
            default: () => {
                return {
                isFalse: ['0', 'n', 'N', 0],
                isTrue: ['1', 'y', 'Y', 1]
                };
            },
            required:false,
        },
        parameterData:{
            type:Object,
            default:()=>{},
            required:false,
        },
        defaultSelected:{
            type:Object,
            default:()=>{
                return {
                    key: '',
                    selectKeyArr:''
                };
            },
            required:false,
        },
        conditionBtnRow:{//按钮和搜索条件在一行
            type:Boolean,
            default:()=>{
                return false
            },
            required:false,
        },
        isCanWrap:{//表格是否换行
            type:Boolean,
            default:()=>{
                return false
            },
            required:false,
        },
        canWrapTableHeight:{//
            type:Number,
            default:()=>{
                return 0
            },
            required:false,
        },
        occupancyHeight:{
            //用来减掉除了分页、搜索条件和表格上的按钮高度以外，页面额外加的内容的高度，由页面传进来进行计算
            type:Number,
            default:()=>{
                return 0
            },
            required:false,
        },
        selectItem:{//默认选中项
            type:Object,
            default:()=>{
                return {
                    selectArr:[],//选中的某列的某个值
                    key:'',//选中的某列的某个值的key
                }
            },
            required:false,
        },
        searchType:{//默认选中项
            type:Boolean,
            default:()=>{
                return false
            },
            required:false,
        },
        arrangeSearchNum:{
            type:Number,
            default:()=>{
                return 4
            },
            required:false,
        },
        assembleWidth:{
            type:Number,
            default:()=>{
                return 0
            },
            required:false,
        },
        tableDataList:{
            type:[Boolean,Array],
            default:()=>{
                return []
            },
            required:false,
        },
        searchMinusWidth:{
            type:Number,
            default:()=>{
                return 0
            },
            required:false,
        },
        tableWidth:{//只有百分之百和多少px的说法
            type:[String,Number],
            default:()=>{
                return '100%'
            },
            required:false,
        },
        prohibitSelection:{//禁止选择
            type:[Object],
            default:()=>{
                return {}
            },
            required:false,
        }
    },
    data(){
        return{
            yearPickerKey:null,
            searchTypeContent:'展开',
            formDataKey:null,
            rangePickerKey:null,
            compSelectorKey:null,
            // formData: {},
            gridOptions: {
                loading:false,
                align:'center',
                headerAlign:'center',
                border: true,
                showHeaderOverflow: true,
                showOverflow: true,
                keepSource: true,
                id:'vxeTable'+new Date().getTime(),
                columnConfig: {
                  resizable: true
                },
                height: this.config.height?this.config.height:600,
                maxHeight:this.adaptiveHeight?(this.config.height?this.config.height:10000000):0,
                rowId: this.config.rowId,
                stripe:true,
                rowConfig:{
                    isHover:true,
                    isCurrent: true,
                    keyField:this.config.rowId?this.config.rowId:'id',
                },
                sortConfig: {
                  trigger: 'cell',
                  remote: true,
                  defaultSort: {
                    field: 'name',
                    order: 'desc'
                  }
                },
                filterConfig: {
                  remote: true
                },
                pagerConfig: {
                  pageSize: this.config.pageSize?this.config.pageSize:10,
                  pageSizes: [5, 15, 20, 50, 100, 200, 500, 1000],
                  currentPage:1,
                  total:0,
                  autoHidden:this.config.autoHidden?this.config.autoHidden:false,
                },
                checkboxConfig: {
                    // labelField: 'id',
                    reserve: false,
                    highlight: true,
                    range: this.config.selectType=='radio'?false:true,
                    checkMethod:(val)=>{
                        if(this.config.isPdf){
                            return val.row[this.config.suffix.key] == this.config.suffix.value
                        }else{
                            return true
                        }
                         
                    }
                },
                radioConfig:{
                    reserve: true,
                    highlight: true,
                    isCurrent: true,
                    keyField: this.selectItem.key?this.selectItem.key:'id',
                    checkRowKey:this.selectItem.selectArr && this.selectItem.selectArr.length?this.selectItem.selectArr[0]:'',
                    range: this.config.selectType=='radio'?true:false,
                },
                customConfig:{

                },
                toolbarConfig: {
                    // custom: true,
                  slots: {
                    buttons: 'toolbar_buttons'
                  }
                },
                treeConfig:{//树形结构配置项
                    transform:this.config.treeConfig?(this.config.treeConfig.transform?true:false):false,
                    rowField:this.config.treeConfig?(this.config.treeConfig.rowField?this.config.treeConfig.rowField:''):'',
                    parentField:this.config.treeConfig?(this.config.treeConfig.parentField?this.config.treeConfig.parentField:''):'',
                    indent:20,
                    expandRowKeys:this.config.expandRowKeys,
                },
                columns: this.columns,
                data: this.tableData,

            },
            isBoolean:[],
            // scopedSlots:this.scopedSlots,
            renderingCompleted:false,
            tableHeight:0,
            compSelectorArr:[],
            compSelectorjlArr:[],
            compSelectorNew:[],
            innerWidth:0,
            btnKey:null,
            windowInnerWidth:0,
            formItemLabelMaxSize:85,
            formItemLabelArr:[],
            formItemLabelIndex:0,
            randomFormDataId:'formDataId'+new Date().getTime(),
            topSearchAndBtnHeight:50,
        }
    },
    computed: {
    },
    watch:{
        // config(newValue,oldValue){
        //     this.getData(this.formData,this.gridOptions.pagerConfig)
        //     //console.log('新的表格有传进来参数吗？',newValue)
            
        // },
        // formData(){
        //     this.getData(this.formData,this.gridOptions.pagerConfig)
        // },
        parameterData:{
            handler (newValue,oldValue){
                //console.log('新的表格有传进来参数吗？',newValue)
                if(newValue){
                    this.getData({...newValue,...this.getTransformData()},this.gridOptions.pagerConfig)
                }
                
            },
            // deep:true,//深度监听输入框输入就会一直刷新表格
            
        },
        adaptiveHeight:{
            handler (newValue,oldValue){
                if(newValue){
                    this.getData({...this.getTransformData()},this.gridOptions.pagerConfig)
                }
                
            },
        },
        formItem:{
            handler (newValue,oldValue){
                //console.log('我得到了新的',newValue)
                if(this.compSelectorArr.length == this.compSelectorjlArr.length*2){
                    this.formItem = newValue
                    this.formDataKey = Date.now()
                    this.getPageHeight()
                }
                
                //console.log('我得到了新的',this.compSelectorArr.length,this.compSelectorjlArr.length)
                // if()
            }
        },
        formItemLabelMaxSize:{
            handler (newValue,oldValue){
                //console.log('我在监听中，能得到表格左边文字的大小',newValue)
                this.getPageHeight()
            }
        }
    },
    mounted(){
        //console.log('我在表格这里刷新了',this.gridOptions.columns)
        // slots: { header: 'name_header', default: 'default_name' }
        this.gridOptions.columns.forEach((item) => {
            item.slots && this.scopedSlots.push({...item.slots,data:item});
            item.isBoolean && item.key && this.isBoolean.push(item.key);
        });
        this.getData(this.formData,this.gridOptions.pagerConfig)
        this.getPageHeight()
        // this.$nextTick(()=>{
                window.addEventListener('resize', this.getPageHeight)
        //     })
        if(this.isCanWrap){
            if(this.searchType){
                if(this.tableWidth !== '100%'){
                    window.innerWidth = this.tableWidth + 200 + 8
                }
                if(!this.assembleWidth){
                    this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }else{
                    this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }
            }else{
                if(this.tableWidth !== '100%'){
                    window.innerWidth = this.tableWidth + 200 + 8
                }
                if(!this.assembleWidth){
                    this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }else{
                    this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }
            }
        }else{
            if(this.searchType){
                if(this.tableWidth !== '100%'){
                    window.innerWidth = this.tableWidth + 200 + 8
                }
                if(!this.assembleWidth){
                    this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }else{
                    this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }
            }else{
                if(this.tableWidth !== '100%'){
                    window.innerWidth = this.tableWidth + 200 + 8
                }
                if(!this.assembleWidth){
                    this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }else{
                    this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                }
            }
        }
       
        let that = this
        that.getFormItemTableWidth()
        this.$nextTick(()=>{
            this.topSearchAndBtnHeight = document.getElementById(this.randomFormDataId)?document.getElementById(this.randomFormDataId).offsetHeight:50
            //console.log('判断表格顶部高度的',document.getElementById(this.randomFormDataId).offsetHeight)
        })
        
        
    },
    destroyed(){
       
    },
    updated(){
        //console.log('更新后')
        this.renderingCompleted = true
        // this.$emit('updatedChange', 1)
        // window.addEventListener('resize', this.handleResize)
    },
    created(){
        this.formItemLabelIndex = new Date().getTime()
        this.compSelectorArr = []
        let that = this
        
        this.$nextTick(()=>{
            that.getFormItemTableWidth()
        })
    },
    methods: {
        getFormItemTableWidth(){
            let that = this
            this.formItemLabelArr = []
            this.$nextTick(()=>{
            // this.formItemLabelIndex = new Date().getTime()
                if(document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+0) && document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+0).offsetWidth || document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+1) && document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+1).offsetWidth){
                    let maxOffsetWidth = document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+0)?document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+0).offsetWidth:85
                    that.formItem.forEach((item,index)=>{
                        if(item.type == 'Select' || item.type == 'Checkbox' || item.type=='Radio'){
                            that.compSelectorjlArr.push(item.type+index)
                        }
                        if(document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index) && document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index).offsetWidth > maxOffsetWidth){
                            maxOffsetWidth = document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index).offsetWidth
                        }
                        //console.log('每一个',document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index))
                        if(document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index)){
                            //console.log('每一个',document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index))
                            that.formItemLabelArr.push(document.getElementById('labelVxeTitleSize'+that.formItemLabelIndex+''+index).offsetWidth)
                        }
                        
                    })
                    that.formItemLabelMaxSize = that.formItemLabelArr.reduce((a,b)=>Math.max(a,b),Number.MIN_SAFE_INTEGER)+13
                    //console.log('获取到的宽度',that.formItemLabelArr)
                    this.getPageHeight()
                }
                
            })
        },
        handleResize(val){
            //console.log('我正在计算选择的宽度1',val)
            //console.log('我正在计算选择的宽度1',val.item.offsetWidth)
            //console.log(Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))
            //console.log((Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))*3+((this.formItemLabelMaxSize+10)*3))
            //console.log((Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))*2+this.formItemLabelMaxSize+10)
            //console.log((Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))+this.formItemLabelMaxSize+10)
            //console.log(this.formItemLabelMaxSize+10)
            if(val.item.offsetWidth && this.windowInnerWidth){
                if(val.item.offsetWidth > (Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))*3+((this.formItemLabelMaxSize+10)*3)){
                    val.item.width = this.windowInnerWidth - this.formItemLabelMaxSize+10
                }else if(val.item.offsetWidth > (Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))*2+this.formItemLabelMaxSize+10){
                    val.item.width = (Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))*3+((this.formItemLabelMaxSize+10)*2)
                }else if(val.item.offsetWidth > (Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))+this.formItemLabelMaxSize+10){
                    val.item.width = (Math.ceil(this.windowInnerWidth / this.arrangeSearchNum))*2+((this.formItemLabelMaxSize+10))
                }
            }
            this.formItem.splice(val.index, 1,val.item)
            //console.log('我正在计算选择的宽度2',this.formItem)
            // this.formItem.push(val.item)
            this.compSelectorArr.push(val.item)
            this.$forceUpdate()
            //console.log('我获取的ref，，','compSelectorRef'+val.index+val.item.type)
            //console.log(this.$refs['compSelectorRef'+val.index+val.item.type])
            let that = this
            //console.log(document.getElementById('compSelectorClass'+val.index+val.item.type))
            this.$nextTick(()=>{
                //console.log(document.getElementById('compSelectorClass'+val.index+val.item.type))
                //console.log(document.getElementById('compSelectorClass'+val.index+val.item.type).width)
                //console.log(that.$refs['compSelectorRef'+val.index+val.item.type].width)
                // that.$refs['compSelectorRef'+val.index+val.item.type].getRefWidth(val.item.width)
            })
            
        },
        searchTypeClick(){
            this.randomFormDataId = 'formDataId'+new Date().getTime()
            this.searchTypeContent = this.searchTypeContent == '展开'?'收起':'展开'
            this.formData = {}
            this.formDataKey = Date.now()
            this.getFormItemTableWidth()
            this.resetEvent()
            this.getPageHeight()
            
        },
        getPageHeight(){
            // if(this.isCanWrap){
                this.$nextTick(()=>{
                    if(this.isCanWrap){
                        if(this.searchType){
                            if(this.tableWidth !== '100%'){
                                window.innerWidth = this.tableWidth + 200 + 8
                            }
                            if(!this.assembleWidth){
                                this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }else{
                                this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }
                        }else{
                            if(this.tableWidth !== '100%'){
                                window.innerWidth = this.tableWidth + 200 + 8
                            }
                            if(!this.assembleWidth){
                                this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }else{
                                this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }
                        }
                    }else{
                        if(this.searchType){
                            if(this.tableWidth !== '100%'){
                                window.innerWidth = this.tableWidth + 200 + 8
                            }
                            if(!this.assembleWidth){
                                this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }else{
                                this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }
                        }else{
                            if(this.tableWidth !== '100%'){
                                window.innerWidth = this.tableWidth + 200 + 8
                            }
                            if(!this.assembleWidth){
                                this.windowInnerWidth = (((window.innerWidth - 200 - 8 - this.searchMinusWidth) - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }else{
                                this.windowInnerWidth = ((this.assembleWidth - this.formItemLabelMaxSize - 32)-(this.formItemLabelMaxSize*this.arrangeSearchNum))
                            }
                        }
                    }
                    let that = this
                    if(document.getElementById(this.randomFormDataId) && document.getElementById(this.randomFormDataId).offsetHeight){
                        let formDataHeight = document.getElementById(this.randomFormDataId).offsetHeight
                        setTimeout(() => {
                            formDataHeight = document.getElementById(that.randomFormDataId)?document.getElementById(that.randomFormDataId).offsetHeight:50
                            let windowHeight = window.innerHeight;
                        
                            let gridTableHeight = 0
                            if(that.isCanWrap){
                                if(!that.config.autoHidden){
                                // 显示分页，需要把分页计算进去
                                //console.log('换行算分页，我得到了什么',formDataHeight,that.occupancyHeight)
                                    this.tableHeight = windowHeight - formDataHeight - 170 - 10 - that.occupancyHeight
                                    
                                }else{
                                    //console.log('换行不算分页，我得到了什么',formDataHeight,that.occupancyHeight)
                                    that.tableHeight = windowHeight - formDataHeight - 120 - 10 - that.occupancyHeight
                                }
                                
                            }else{
                                if(!that.config.autoHidden){
                                    //console.log('不换行算分页')
                                    gridTableHeight = windowHeight - 120 - 10  - that.occupancyHeight
                                }else{
                                    gridTableHeight = windowHeight - 120 - 10 - that.occupancyHeight
                                }
                                
                            }
                            
                            
                            that.gridOptions.height = that.config.height?that.config.height:gridTableHeight
                        }, 200)
                    }
                    
                    
                    
                    // //console.log('表格当前高度',windowHeight,formDataHeight,this.tableHeight)
                    // //console.log('表格当前高度',this.gridOptions.height,this.config.height,gridTableHeight)
                })
            // }
            
        },
        async getData(params, pagerConfig, sorter){
            return new Promise((resolve, reject) => {
                this.renderingCompleted = false
                this.gridOptions.loading = true
                let sorterData = {}
                if(sorter){
                    if(this.serverSorter && sorter.field){
                        sorterData = {orderItem:sorter.columnKey,orderType:sorter.order}
                        this.$emit('sorterChange',sorterData,sorter)
                    }
                }
                //console.log('我在表格传进来的数据列表',this.tableDataList)
                if((!this.config.api && this.tableDataList) || this.tableDataList.length){
                    //console.log('我在表格传进来的数据列表',this.tableDataList)
                    this.gridOptions.pagerConfig.total = Array.isArray(this.tableDataList)?this.tableDataList.length:0
                    this.gridOptions.data = Array.isArray(this.tableDataList)?this.tableDataList:[]
                    this.gridOptions.loading = false; // 数据请求完成标识
                    resolve(!this.gridOptions.loading);
                }else{
                    axios({
                        url: this.config.api,
                        method:'get' ,
                        params: {
                            pageNo:pagerConfig.currentPage,
                            pageSize:pagerConfig.pageSize,
                            fywflcode:this.config.fywflcode,
                            ...sorterData,
                            ...this.parameterData,
                            ...this.config.paramet,
                            ...params,
                            ...this.getTransformData(),
                        },
                        url_1:this.config.urlType?'':'outside',
                        url_2:this.config.urlType?'outside':''
                    }).then((res) => {
                        if (res.code === 200 && !this.tableData.length) {
                            if(res.result.records){
                                //console.log('表格列表数据',res.result.records)
                                res.data = res.result.records
                                if (!Array.isArray(res.data)) {
                                    res.data = [];
                                }
                                this.gridOptions.pagerConfig.total = res.result.total || 0;

                                if (this.isBoolean.length) {
                                    this.gridOptions.data = res.data.map((item) => {
                                        this.isBoolean.forEach((key) => {
                                        if (this.toBoolean.isTrue.indexOf(item[key]) > -1) {
                                            item[key] = true;
                                        } else if (this.toBoolean.isFalse.indexOf(item[key]) > -1) {
                                            item[key] = false;
                                        }
                                        });
                                        return item;
                                    });
                                } else {
                                    this.gridOptions.data = res.data;
                                }
                            }
                            if(res.result.wjjlList){
                                this.gridOptions.data = res.result.wjjlList
                                this.gridOptions.pagerConfig.total = res.result.wjjlList.length
                            }
                            if(Array.isArray(this.config.listData) && this.config.listData.length == 2){
                                let obj = res.result[this.config.listData[0]]
                                if(obj[this.config.listData[1]]){
                                    this.gridOptions.data = obj[this.config.listData[1]]
                                    this.gridOptions.pagerConfig.total = obj[this.config.listData[1]].length
                                }else{
                                    this.gridOptions.data = []
                                    this.gridOptions.pagerConfig.total = 0
                                }
                                
                            }
                            if(Array.isArray(this.config.listData) && this.config.listData.length == 3){
                                let obj = res.result[this.config.listData[0]]
                                let obj1 = obj[this.config.listData[1]]
                                if(obj1[this.config.listData[2]]){
                                    this.gridOptions.data = obj1[this.config.listData[2]]
                                    this.gridOptions.pagerConfig.total = obj1[this.config.listData[2]].length
                                }else{
                                    this.gridOptions.data = []
                                    this.gridOptions.pagerConfig.total = 0
                                }
                            }
                            if(!Array.isArray(this.config.listData) && this.config.listData && res.result[this.config.listData]){
                                //console.log('当前表格指定列表数据',this.config.listData)
                                this.gridOptions.data = res.result[this.config.listData]
                                this.gridOptions.pagerConfig.total = res.result[this.config.listData].length
                            }
                            if(this.config.listData){
                                if(!Array.isArray(this.config.listData) && !res.result[this.config.listData]){
                                    this.gridOptions.data = []
                                    this.gridOptions.pagerConfig.total = 0
                                }
                                
                            }
                            if(this.adaptiveHeight && this.gridOptions.pagerConfig.total>2){
                                this.config.height = (this.gridOptions.pagerConfig.total + 1) * 48
                            }
                        }else{
                            this.gridOptions.pagerConfig.total = this.tableData.length
                            this.gridOptions.data = this.tableData
                        }
                        
                        //选中模板默认选中
                        if(this.defaultSelected.key && res.result[this.defaultSelected.key]){
                            let key = this.defaultSelected.key
                            this.gridOptions.data.forEach((item,index)=>{
                                if(res.result[key] == item.id){
                                    this.gridOptions.data[index].checked = true
                                    this.$emit('getDefaultSelected',item.id)
                                    this.gridOptions.radioConfig.checkRowKey = item.id
                                }
                            })

                        }
                        //console.log(this.gridOptions.data)
                        this.selectExceed()//默认选中方法
                        this.gridOptions.loading = false; // 数据请求完成标识
                        resolve(!this.gridOptions.loading);
                    });
                }
            });
        },
        panelChangeDatePicker(val,type,name){
            this.formData[name] = moment(val).format(type)
            this.yearPickerKey = Date.now()
            this.searchEvent('oneself')
        },
        onChangeDatePicker(val,type,name){
            this.formData[name] = moment(val).format(type)
            this.searchEvent('oneself')
        },
        onChangeRangePicker(val,type,name){
            //console.log(moment(val[0]).format(type),moment(val[1]).format(type),type,name)
            this.formData[name[0]] = moment(val[0]).format(type)
            this.formData[name[1]] = moment(val[1]).format(type)
            this.searchEvent('oneself')

        },
        //转化数据，是数组的话没办法传给后端也不能改变视图上的数据格式
        getTransformData(){
            let data = JSON.parse(JSON.stringify(this.formData)) 
            for (let key in data) {
                if(Array.isArray(data[key])){
                    data[key] = data[key].length?data[key].join(','):''
                }
            }
            return data
        },
        selectHandleChange(val,name,convert){
            //console.log(val,name,convert,Array.isArray(val))
            // this.formData[name] = convert && Array.isArray(val)?(val.length?val.join(','):''):val
            this.formData[name] = val
            this.searchEvent('oneself')
        },
        searchEvent (val) {//查询
            //console.log('是你在刷吗？')
            // const $grid = this.$refs.xGrid
            // $grid.commitProxy('query')
            //console.log(this.config)
            if(val == 'oneself'){
                this.gridOptions.pagerConfig.currentPage = 1
                this.getData({...this.getTransformData(),...this.config.paramet},{...this.gridOptions.pagerConfig,currentPage:1})
                
            }else{
                //还是在当前页
                this.getData({...this.getTransformData(),...this.config.paramet},this.gridOptions.pagerConfig)
            }
            this.$emit('searchEvent',this.getTransformData(),this.config.paramet)
            
            
        },
        resetEvent () {//重置
            this.$emit('resetEvent')
            const $grid = this.$refs.xGrid
            if($grid.commitProxy){
                $grid.commitProxy('reload')
            }
            
            this.formData = {}
            this.gridOptions.pagerConfig.currentPage = 1
            this.getData({},{currentPage:1,pageSize:this.gridOptions.pagerConfig.pageSize})
            this.compSelectorKey = Date.now()
            this.rangePickerKey = Date.now()
            this.formDataKey = Date.now()
            
        },
        //重置表格选中
        resetEventSelect(){
            const $grid = this.$refs.xGrid
            if($grid.commitProxy){
                $grid.commitProxy('reload')
            }
            this.getData({},{pageSize:this.gridOptions.pagerConfig.pageSize})
        },

        checkboxChange(val){//选择
            //console.log(val)
            //console.log('当前选择',val.records)
            this.$emit('checkboxChange',val.records)
        },
        radioChange(val){
            //console.log('当前选择',val)
            this.$emit('radioChange',val)
        },
        //单选-禁止选择（目前只支持换行表格）
        checkRadioMethod({row}){
            // //console.log('我正在禁用',row,this.prohibitSelection)
            let value = row[this.prohibitSelection.key]?row[this.prohibitSelection.key]:''
            if(this.prohibitSelection.key && this.prohibitSelection.value && value){
                if(this.prohibitSelection.type == '!='){
                    // //console.log('我禁用的条件是什么1',value != this.prohibitSelection.value)
                    return value != this.prohibitSelection.value
                }else if(this.prohibitSelection.type == '>'){
                    // //console.log('我禁用的条件是什么2',value > this.prohibitSelection.value)
                    return value > this.prohibitSelection.value
                }else if(this.prohibitSelection.type == '>='){
                    // //console.log('我禁用的条件是什么3',value >= this.prohibitSelection.value)
                    return value >= this.prohibitSelection.value
                }else if(this.prohibitSelection.type == '<='){
                    // //console.log('我禁用的条件是什么4',value <= this.prohibitSelection.value)
                    return value <= this.prohibitSelection.value
                }else if(this.prohibitSelection.type == '<'){
                    // //console.log('我禁用的条件是什么5',value < this.prohibitSelection.value)
                    return value < this.prohibitSelection.value
                }else{
                    // //console.log('我禁用的条件是什么6',value == this.prohibitSelection.value)
                    return value == this.prohibitSelection.value
                }
                
            }else{
                //console.log('我禁用的条件是什么7',)
                return true
            }
        },
        sortChangeEvent({ column, property, order }){//排序
            //console.log(column, property, order)
            let data = {
                orderItem:property,
                orderType:order,
            }
            this.getData({...this.getTransformData(),...this.config.paramet,...data},this.gridOptions.pagerConfig)
        },
        pageChange(val){//分页
            this.gridOptions.pagerConfig.currentPage = val.currentPage
            this.gridOptions.pagerConfig.pageSize = val.pageSize
            this.getData(this.formData,this.gridOptions.pagerConfig)
        },
        // 处理表格中选择的行！！！！！
        handlerSelectRow(current = []) {
            const tab = this.$refs.xGrid;
            const reserves = tab && tab.getCheckboxReserveRecords();
            const result = reserves.concat(current);
            //console.log('选择的rows',result);
        },
        // 默认选中
        selectExceed(){
            if(this.selectItem.selectArr && this.selectItem.selectArr.length){
                const tab = this.$refs.xGrid;
                let rowArr = []
                this.selectItem.selectArr.forEach(item=>{
                    let arr = rowArr.filter(a=>a[this.selectItem.key] == item)
                    if(!arr.length){
                        let row = this.gridOptions.data.filter(i => i[this.selectItem.key] == item)
                        rowArr.push(row[0])
                    }
                })
                
                
                tab && tab.setCheckboxRow(rowArr, true);
                this.handlerSelectRow(rowArr)
            }
            
        },
        //当树节点展开或收起时会触发该事件 -- //
        toggleExpandChangeEvent(obj){
            this.$emit('toggleExpandChangeEvent',obj.row,obj.expanded)
        },
        
        
    }
}
</script>
<style lang="less">
.commp-table-total-box{
    overflow: hidden !important;
    .vxe-body--column{
        position: relative;
    }
    .vxe-table--render-default,.vxe-form{
        font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
    }
    .vxe-form--wrapper{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .vxe-form--item{
        margin-left: 5px;
    }
    .vxe-form--item-title{
        // width: 85px !important;
        text-align: right;
    }
    .vxe-form--item-title-content{
        padding: 0 !important;
    }
    // .e-z{
    //     letter-spacing: 21px;
    // }
    // .s-z{
    //     letter-spacing: 9px;
    // }
    // .f-z{
    //     letter-spacing: 3px;
    // }
    
    .vxe-header--row{
        background: #dee5ed !important;
    }
    .vxe-form--item-content{
        .theme--primary{
            border: 1px solid #5ca3e5 !important;
            background-color: #5ca3e5 !important;
            color: #fff !important;
        }
    }
    .condition-vxe-box{
        border: 1px solid #d9d9d9;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 3px;
        margin:0 0 8px 0 !important;
        .vxe-form .vxe-form--item{
            padding: 0;
            padding-bottom: 0px;
            padding-right: 5px;
        }
    }
    .condition-btn-row{
        display: flex;
        justify-content: space-between;
        flex-direction: row !important;
        flex-wrap: wrap;
    }
    .form-item-emty-box{
        border: 0;
        margin:0 !important;
    }
    .push-button-vxe{
        // width: 100%;
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
    .vxe-checkbox--icon{
        color: #5ca3e5 !important;
        font-weight:normal !important;
    }
    .vxe-table--body-wrapper{
        ::-webkit-scrollbar {
            width: 5px !important;
        }
    }
    .vxe-table--render-default.border--full .vxe-body--column, 
    .vxe-table--render-default.border--full .vxe-footer--column, 
    .vxe-table--render-default.border--full .vxe-header--column{
        background-image:linear-gradient(#d9d9d9,#d9d9d9),linear-gradient(#d9d9d9,#d9d9d9);
    }
    .vxe-form--item-title-label{
        color: #000 !important;
    }
    // .vxe-table--render-default .vxe-cell{
    //     padding: 0 8px 0 10px !important;
    // }
    td,th{
        padding: 3px 10px !important;
        text-align: center;
    }
    th{
        font-weight: 400 !important;
        height: 40px;
    }
    .vxe-table--render-default .vxe-header--column.col--ellipsis{
        height: auto !important;
    }
    .vxe-table--render-default .vxe-body--column.col--ellipsis{
        height: auto !important;
    }
    .vxe-table--render-default .vxe-body--row.row--stripe{
        background-color: #f0f0f1 !important;
    }
    .vxe-table--render-default .vxe-body--row.row--hover{
        background-color: #fafafa !important;
    }
    .vxe-table--render-default .vxe-body--row.row--current{
        background-color: #e6f7ff !important;
    }
    .vxe-table--render-default .vxe-body--row.row--checked{
        background-color: #fff3e0 !important;
    }
    
    .vxe-button.type--button{
        height: 30px !important;
        padding: 0 8px !important;
    }
    .vxe-input{
        height: 30px !important;
    }
    .vxe-form .vxe-form--item-inner{
        min-height: 30px !important;
        margin: 3px 0;
    }
    .vxe-toolbar{
        padding: 5px 0 !important;
    }
}

.commp-vxe-table-box,.adaptive-height-box{
    background-color: #fff;
    padding: 5px 15px;
    th{
        font-family:仿宋_GB2312 !important;
        font-weight: 600 !important;
    }
    th,td,tr{
        height: 40px !important;
        color: #000 !important;
        
        // #d9d9d9
    }
    .vxe-table--render-default .vxe-body--column.col--ellipsis,
     .vxe-table--render-default .vxe-footer--column.col--ellipsis,
      .vxe-table--render-default .vxe-header--column.col--ellipsis,
     .vxe-table--render-default.vxe-editable .vxe-body--column{
        height: 40px !important;
        overflow: hidden !important;
     }
    
}

.isCanWrap-box{
    .vxe-table--render-default .vxe-cell{
        padding: 0 !important;
    }
    .vxe-table--body-wrapper{
        // overflow-x: hidden !important;
    }
    // .vxe-table--body-wrapper .body--wrapper{
    //     width: 100%;
    //     overflow: hidden;
    // }
    .vxe-table--render-default .fixed--hidden{
        visibility: visible !important;
    }
}
.adaptive-height-box{
    padding: 5px 15px;
    .vxe-table--fixed-right-wrapper ,.scrolling--middle{
        height: 100% !important;
    }
    th{
        font-family:仿宋_GB2312 !important;
        font-weight: 600 !important;
        padding: 0 !important;
    }
    td{
        padding: 0 !important;
    }
    .vxe-table--render-default .vxe-cell{
        padding: 3px 10px !important;
        text-align: center;
    }
}
.overflowHidden-table-box{
    .col--ellipsis{
        overflow: hidden !important;
    }
    .vxe-table--render-default .vxe-cell{
        padding: 0 10px !important;
        text-align: center;
    }
    td,th{
        padding: 0 0px !important;
    }
}
</style>